<template>
    <div class="vip-center">
        <h1>VIP 权益中心</h1>
        <div class="back-button" @click="goBack">
      <i class="fa fa-arrow-left"></i>
    </div>
        <div class="benefit-section">
            <div class="icon-container">
                <img src="../assets/打折.jpg" alt="Discount Icon" class="icon">
            </div>
            <div class="text-container">
                <h2>专属折扣</h2>
                <p>享受全场商品 8 折优惠，让您购物更实惠。</p>
            </div>
        </div>
        <div class="benefit-section">
            <div class="icon-container">
                <img src="../assets/客服.jpg" alt="Customer Service Icon" class="icon">
            </div>
            <div class="text-container">
                <h2>优先客服</h2>
                <p>专属客服通道，优先解答您的问题，提供贴心服务。</p>
            </div>
        </div>
        <div class="benefit-section">
            <div class="icon-container">
                <img src="../assets/生日.jpg" alt="Birthday Icon" class="icon">
            </div>
            <div class="text-container">
                <h2>生日福利</h2>
                <p>生日当天可获得神秘礼品一份，以及额外的积分奖励。</p>
            </div>
        </div>
        <div class="benefit-section">
            <div class="icon-container">
                <img src="../assets/积分.jpg" alt="Points Icon" class="icon">
            </div>
            <div class="text-container">
                <h2>积分加倍</h2>
                <p>消费积分获取加倍，积分可兑换精美礼品或优惠券。</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
methods: {
    goBack() {
      this.$router.go(-1);
    }
  }
}
</script>

<style>
.vip-center {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    max-width: 700px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f6f8f9, #4097de);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
    color: #007bff; /* 主色调 */
    font-size: 1.8em; /* 增大字体 */
    margin-bottom: 20px; /* 底部间距 */
    text-align: center; /* 居中对齐 */
    font-family: 'Arial', sans-serif; /* 字体选择 */
    font-weight: bold; /* 加粗字体 */
    line-height: 1.2; /* 行高 */
    letter-spacing: 1px; /* 字母间距 */
    text-shadow: 1px 1px 2px rgba(0, 123, 255, 0.3); /* 添加阴影效果 */
    transition: color 0.3s ease; /* 颜色过渡效果 */
}

h1:hover {
    color: #0056b3; /* 悬停时颜色变化 */
}


.benefit-section {
    display: flex;
    align-items: center;
    margin: 20px 0;
    padding: 15px;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s,background-color 0.3s;;
}

.benefit-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.benefit-section:active {
    background-color: #c9d8e9; /* 点击时的背景颜色 */
}

.icon-container {
    flex: 0 0 50px;
    margin-right: 15px;
}

.icon {
    width: 90px;
    height: 90px;
}

.text-container {
    flex: 1;
    text-align: left;
}

h2 {
    color: #333;
    font-size: 1.5em;
    margin-bottom: 5px;
}

p {
    color: #666;
    font-size: 1em;
}
/* 返回按钮样式 */
.back-button {
  position: fixed;
  top: 16px; /* 根据需要调整 */
  left: 10px; /* 根据需要调整 */
  cursor: pointer;
  color: #4582eb; /* 根据header背景色调整 */
  font-size: 20px; /* 根据需要调整 */
  z-index: 1001; /* 确保按钮在header之上 */
}
</style>
